<template>
  <footer
    class="mt-10 md:mt-16 bottom-0 left-0 z-20 w-full p-2 bg-white border-t border-b border-gray-200 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 footer">
    <div
      class="max-w-screen-xl mx-auto md:flex md:items-center md:justify-between p-3 flex flex-col md:flex-row items-center justify-center">
      <span class="text-xs md:text-sm font-mi text-gray-500 sm:text-center dark:text-gray-300">© 2024 <a
          href="https://github.com/shangzhengfei" target="_blank" class="hover:underline font-mi">起风了</a>. All
        Rights Reserved.&nbsp;
        <a href="http://beian.miit.gov.cn/publish/query/indexFirst.action" target="_blank"
          rel="noopener noreferrer nofollow"
          class="text-xs md:text-sm hidden md:inline font-mi text-gray-500 sm:text-center dark:text-gray-300"
          style="text-decoration: none;">沪ICP备2024xxxx号-1</a>
      </span>
      <ul
        class="flex flex-wrap font-mi items-center text-xs md:text-sm font-medium text-gray-500 dark:text-gray-300 sm:mt-0">
        &nbsp;&nbsp;Provided by&nbsp;
        <li>
          <a href="https://www.flyecho.fun" target="_blank" class="mr-3 hover:underline md:mr-4 font-mi">
            <i class="fas fa-link"></i> 小风
          </a>
        </li>
      </ul>
    </div>
  </footer>
</template>

<style scoped>
.footer {
  box-shadow: 0 -2px 10px rgb(0 0 0 / 5%);
  /* background: linear-gradient(to right, #f8fafc, #f6f6f6); */
  transition: all 0.3s ease-in-out;
}

.footer a:hover {
  /* color: #4a5568; */
  text-decoration: underline;
}

.footer span,
.footer ul {
  line-height: 1.4;
}

@media (max-width: 768px) {
  .footer .flex-col {
    flex-direction: row;
  }
}
</style>
